<template>
  <div>
    <p>Parent</p>
    <hr />
    <!-- 父传子，通过属性的方式来传递
      注意点：除了字符串，其它类型的值，无论是普通的值类型还是引用类型，都需要绑定
    -->
    <!-- <Child
      name="张三"
      :age="18"
      :isMan="true"
      :address="address"
      :persons="persons"
    /> -->
    <Child
      name="张三"
      :isMan="true"
      :address="address"
      :persons="persons"
      @myevent="getValue"
    />
  </div>
</template>

<script>
// 导入子组件
import Child from './Child.vue'

// 必须默认导出组件实例
export default {
  name: 'Parent',
  // 局部注册子组件
  components: {
    Child
  },
  // 组件中的data必须是一个函数，并且它里面必须返回一个全新的对象
  data () {
    return {
      address: {
        province: '广东省',
        city: '深圳市'
      },
      persons: ['张三丰', '张无忌', '周芷若', '赵敏']
    }
  },
  methods: {
    getValue (value) {
      console.log('---parent---', value)
    }
  }
}
</script>
